<template>
  <div>
    <Breadcrumb :items="['menu.system', '按钮配置']" />
    <div>
      <a-spin :loading="pageLoading?.loading" style="width: 100%">
        <CardConponents>
          <a-button type="primary" @click="handleClick">新增</a-button>
        </CardConponents>
        <CardConponents>
          <a-table :data="dataList?.list">
            <template #columns>
              <a-table-column title="id" data-index="id"></a-table-column>
              <a-table-column title="标题" data-index="title"></a-table-column>
              <a-table-column title="状态" data-index="status">
                <template #cell="{ record }">
                  {{ showStatus( record) }}
                </template>
              </a-table-column>
              <a-table-column title="排序" data-index="sort"></a-table-column>
              <a-table-column title="创建时间" data-index="create_time">
                <template #cell="{ record }">
                  {{ record.create_time ? getTime(Number(record?.create_time)) : '' }}
                </template>
              </a-table-column>
              <a-table-column title="操作">
                <template #cell="{ record }">
                  <a-button type="primary" size="small" @click="handleEdidClick(record)">编辑</a-button>
                  <a-popconfirm content="确定要删除吗?" type="error" @ok=handleDelClick(record)>
                    <a-button type="primary" status="danger" size="small">删除</a-button>
                  </a-popconfirm>
                </template>
              </a-table-column>
            </template>
          </a-table>

        </CardConponents>
        <a-modal :maskClosable=false v-model:visible="visible" :title="form.Id > 0 ? '新增' : '编辑'" :footer="false">
          <a-form :model="form" @submit="handleSubmit">
            <a-form-item field="Title" label="标题" :rules="[{ required: true, message: '不能为空' }]">
              <a-input v-model="form.Title" />
            </a-form-item>
            <a-form-item field="Subtitle" label="副标题" >
              <a-input v-model="form.Subtitle" />
            </a-form-item>
            <a-form-item field="StatusEd" label="状态">
              <a-switch checked-value="true" v-model="form.StatusEd" />
            </a-form-item>
            
            <a-form-item field="Sort" label="排序">
              <a-input v-model="form.Sort" />
            </a-form-item>

            <a-form-item field="Content" label="内容">
              <a-textarea v-model="form.Content" placeholder="Please enter something" />
            </a-form-item>

            <div class="btn">
              <a-button style="width: 100px;margin-right: 10px;" @click="cancelClick">
                取消
              </a-button>
              <a-button style="width: 100px;" type="primary" html-type="submit" long :loading="loading">
                提交
              </a-button>
            </div>
          </a-form>
        </a-modal>
      </a-spin>
    </div>
  </div>
</template>


<script lang="ts" setup>
import CardConponents from '@/components/card/index.vue';
import { reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';

import { list, add, edit, del } from '@/api/regulations';//获取列表
import { getTime } from '@/utils/auth'

const pageLoading: any = reactive({ loading: false });


const form: any = reactive({
  Title: '',
  Subtitle: '',
  Content: '',
  StatusEd:'',
  Sort: '',
  Id: '',
});

const visible = ref(false);
const clearForm = () => {
  form.Title = ''
  form.Subtitle=''
  form.Content = ''
  form.StatusEd = ''
  form.Sort = ''
  form.Id = ''
}
const cancelClick = () => {
  visible.value = false;
  clearForm()
}

//新增弹框
const handleClick = () => {
  visible.value = true;
  clearForm()
};

const showStatus = (value: any) => {
  return value.status === 1 ? '正常' : '禁止'
}




const { loading, setLoading } = useLoading();

onMounted(() => {
  getList()
});

//数据
const dataList: any = reactive({
  list: [],
  total: 0
});

const buttonDataList: any = reactive({
  list: []
})

//请求
const getList = async () => {
  pageLoading.loading = true
  const res = await list({ data: { Offset: 0, Limit: 10 } })
  pageLoading.loading = false
  dataList.list = res?.data?.List
  dataList.total = res?.data?.Total
}


//新增、编辑
const handleSubmit = async ({ errors, values }: any) => {
  if (loading.value) return;
  if (!errors) {

    if (values.StatusEd == "true" || values.StatusEd == true) {
      values.Status = 1
    } else {
      values.Status = 0
    }
    try {
      setLoading(true);
      if (form.Id > 0) {
        const res: any = await edit(values);
        Message.success(res?.msg);
        setLoading(false);
        if (res?.code == 1) {
          visible.value = false;
          clearForm()
          getList()
        }
      } else {
        const res: any = await add(values);
        Message.success(res?.msg);
        setLoading(false);
        if (res?.code == 1) {
          visible.value = false;
          clearForm()
          getList()
        }
      }
    } catch (error) {
      setLoading(false);
    }
  }
};


const handleEdidClick = (value: any) => {
  // clearForm()
  visible.value = true;
  // clearForm()
  form.Title = value.title
  form.StatusEd = value.status == 1 ? true : false
  form.Sort = value.sort
  form.Id = value.id
  form.Subtitle=value.Subtitle
  form.Content = value.content
  
}

// 删除
const handleDelClick = async (value: any) => {
  const res: any = await del({ Id: value?.id });
  Message.success(res?.msg)
  if (res?.code === 1) {

    getList()
  }
}
</script>

<script lang="ts">
export default {
  name: 'Regulations',
};
</script>

<style lang="less" scoped>
.btn {
  display: flex;
  justify-content: flex-end;
}
</style>
